<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷达图</title>
    <base href="/">
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAdmin.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main_dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/footer.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="../static/js/public.js"></script>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

    <style>
        .data_input {
            background-color: #fff;
            height: 150px;
            padding-top: 15px;
        }

        .chart_display {
            margin-top: 7px;
            background-color: #fff;
            height: 620px;
        }

        {#.input_data input {#}
        {#    outline-style: none;#}
        {#    border: 1px solid #ccc;#}
        {#    border-radius: 3px;#}
        {#    padding: 4px 14px;#}
        {#    font-size: 12px;#}
        {#    width: 180px;#}
        {#    border-color: #66afe9;#}
        {#    outline: 0;#}
        {#    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);#}
        {#    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)#}
        {#}#}

        body {
            background: #F6F8FA;
        }

        .nav {
            background-color: #34495e;
            height: 80px;
            width: 1330px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .footer {
            width: 1330px;
            background-color: #34495e;
            margin-top: 810px;
            height: 80px;
            margin-left: 7px;
            margin-bottom: 5px;
        }

        .logo {
            width: 250px;
            height: 80px;
            background-color: #aee6a6;
            margin-left: 10px;
        }

        .logo img {
            width: 250px;
            height: 80px;
        }

        .chart {
            margin-left: 10px;
            margin-top: 10px;
            font-size: 18px;
        }

        .left {
            background-color: #34495e;
            height: 800px;
            width: 265px;
            float: left;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 7px;
        }
        .update {
            width: 110px;
            height: 30px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 2px;
            border: none;
            background-color: #4ca2ec;
            color: #fff;
            line-height: 30px;
        }

        .update:hover {
            background-color: #4687b1;
        }

        .create {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 200px;
            font-size: 14px;
            font-weight: 300;
            background: #4ca2ec;
            visibility: visible;
            padding: 3px;
            border-bottom-color: #2B562B;
            cursor: pointer;
            text-decoration: none;
            color: #FFF;
            text-shadow: 0 1px 0 #5d4113;
        }
         .create:hover {
            background-color: #4687b1;
        }
        .user_input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 3px;
            width: 250px;
            font-size: 14px;
            font-weight: 300;
        }

        input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }
    </style>
</head>
<body>
<div class="container" id="container" style="">
    <!--nav-->
    <div class="nav">
        <div class="logo">
            <img src="../static/img/logo.jpg">
        </div>
    </div>
    <nav>
        <!--导航条-->
        <ul class="nav-main">
            <li><a href="">首页</a></li>
            <li id="li-1">在线数据分析<span></span></li>
            <li id="li-2">数据社区<span></span></li>
            <li id="li-3">数据可视化<span></span></li>
            <li><a href="/contact/">联系我们</a></li>
            <li><a href="/help/">帮助中心</a></li>
        </ul>
        <!--隐藏盒子-->
        <div id="box-1" class="hidden-box hidden-loc-index">
            <ul>
                <li><a href="/analysis/">数据分析</a></li>
            </ul>
        </div>
        <div id="box-2" class="hidden-box hidden-loc-us">
            <ul>
                {% for catagory in allcategory %}
                <li><a href="{% url 'index' %}blog/list{{ catagory.id }}">{{ catagory.nama }}</a></li>
            {% endfor %}
            </ul>
        </div>
        <div id="box-3" class="hidden-box hidden-loc-info">
            <ul>
                <li><a href="/visualization/bar/">数据可视化</a></li>
            </ul>
        </div>
    </nav>
    {% include 'left_menu.html' %}
    <div class="content1" id="content1">
        <div class="data_input">
            <form action="/visualization/save_rfile/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="input_data">
                    <table border="0" cellpadding="0" cellspacing="0" style="margin: auto;line-height: 30px" class="data_table">
                        <tr>
                            <td>上传CSV数据</td>
                            <td>
                                <input type="file" required name="csv_file">
                            </td>
                            <td>
                                <input type="submit" class="update" value="上传CSV数据集">
                            </td>
                            <td>
                                <span style="color: red">{{ message }}</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
            <br>
            <form method="post" action="/visualization/radar/">
                {% csrf_token %}
                <table border="0" cellpadding="0" cellspacing="0" style="margin-left:220px;line-height: 30px " class="data_table">
                    <tr>
                        <td>输入标题&nbsp;&nbsp;</td>
                        <td><input type="text" class="user_input" required placeholder="请输入标题" name="r_title">&nbsp;&nbsp;</td>
                        <td>输入副标题&nbsp;&nbsp;</td>
                        <td><input type="text" class="user_input" required placeholder="请输入副标题" name="sub_title"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" class="create" name="create" value="创建图表">
                        </td>
                        <td><span style="color: red">{{ r_message }}</span></td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="chart_display">
            <div class="chart">
                <div id="radar" style="width:700px; height:500px;margin-left: 140px;">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <footer style="border-top: 1px solid ; background-repeat: repeat;"
                class="footer">
            <div class="footer-inner">
                <div class="fooert copyright" align="center">
                    <a href="##" target="_blank">友情链接：</a>
                    <a href="https://www.django.cn/" target="_blank">Django中文网</a>
                    | <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
                    | <a href="http://pyecharts.org/#/zh-cn/" target="_blank">pyecharts</a> |
                    <a href="http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html" rel="sitemap">站长素材</a>
                    | <a href="##" target="_blank">联系我们</a>
                    <p><a href="/" title="dry">dry</a> 版权所有，保留一切权利 ! <a href="https://www.kkkuu.cn/">首页</a> © 2019-2020
                        ·
                        黔ICP备00000000号</p>
                </div>
        </footer>
    </div>

</div>
<script>
    (function () {
        var oList = document.querySelectorAll('.list h2'),
            oHide = document.querySelectorAll('.hide'),
            oIcon = document.querySelectorAll('.list i'),
            lastIndex = 0;
        for (var i = 0; i < oList.length; i++) {
            oList[i].index = i;//自定义属性
            oList[i].isClick = false;
            oList[i].initHeight = oHide[i].clientHeight;
            oHide[i].style.height = '0';
            oList[i].onclick = function () {
                if (this.isClick) {
                    oHide[this.index].style.height = '0';
                    oIcon[this.index].className = '';
                    oList[this.index].className = '';
                    oList[this.index].isClick = false;
                } else {
                    oHide[lastIndex].style.height = '0';
                    oIcon[lastIndex].className = '';
                    oList[lastIndex].className = '';
                    oHide[this.index].style.height = '220px';
                    oIcon[this.index].className = 'on';
                    oList[this.index].className = 'on';
                    oList[lastIndex].isClick = false;
                    oList[this.index].isClick = true;
                    lastIndex = this.index;
                }
            }
        }
    })();

</script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('radar'));
    // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
    var dataBJ =
        {{ dataSet | safe }};
    var lineStyle = {
        normal: {
            width: 1,
            opacity: 0.5
        }
    };

    option = {
        backgroundColor: '#161627',
        title: {
            text: '{{ r_title |safe }}',
            left: 'center',
            textStyle: {
                color: '#eee'
            }
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['circle', 'radar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            bottom: 5,
            data: ['{{ sub_title }}'],
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            selectedMode: 'single'
        },
        visualMap: {
            show: true,
            min: 0,
            max: 20,
            dimension: 6,
            inRange: {
                colorLightness: [0.5, 0.8]
            }
        },
        radar: {
            indicator: [
                {name: 'AQI', max: 300},
                {name: 'PM2.5', max: 250},
                {name: 'PM10', max: 300},
                {name: 'CO', max: 5},
                {name: 'NO2', max: 200},
                {name: 'SO2', max: 100}
            ],
            shape: 'circle',
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(238, 197, 102, 0.5)'
                }
            }
        },
        series: [
            {
                name: '{{ sub_title | safe }}',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataBJ,
                symbol: 'none',
                itemStyle: {
                    color: '#F9713C'
                },
                areaStyle: {
                    opacity: 0.1
                }
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script src="../static/js/index.js"></script>
</body>
</html>